import React from 'react'
import {Card,Button, Modal} from 'antd'
import './ui.less'



export default class Modals extends React.Component{
    state = {
        showModal1:false,
        showModal2:false,
        showModal3:false,
        showModal4:false
    }
    handleOpen = (type)=>{
        this.setState({
            [type]:true
        })
    }
    handleConfirm = (type)=>{

        // var a ={
        //     confirm:function(){}
        // }
        // a.confirm()
        // a['confirm']

        Modal[type]({
            title:'确认？',
            content:'确定没问题了吗',
            onOk(){
                console.log('Ok')
            },
            onCancel(){
                console.log('Cancel')
            }
        })
    }
    render(){
        return(
            <div>
                <Card titlr="基础模态框" className="card-warp">
                    <Button type="primary" onClick={()=>this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={()=>this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={()=>this.handleOpen('showModal3')}>顶部20px弹框</Button>
                    <Button type="primary" onClick={()=>this.handleOpen('showModal4')}>水平垂直居中</Button>
                </Card>
                <Card titlr="信息确认框" className="card-warp">
                    <Button type="primary" onClick={()=>this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={()=>this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={()=>this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={()=>this.handleConfirm('warning')}>Warning</Button>
                </Card>
                <Modal 
                title="React"
                visible={this.state.showModal1}
                // okText="下一步"
                // cancelText="算了"
                onCancel={()=>{
                    this.setState({
                        showModal1:false
                    })
                }}>
                    <p>Hello I'm Modal!</p>
                </Modal>
                <Modal 
                title="React"
                visible={this.state.showModal2}
                okText="下一步"
                cancelText="算了"
                onCancel={()=>{
                    this.setState({
                        showModal2:false
                    })
                }}>
                    <p>Hello I'm Modal!</p>
                </Modal>
                <Modal 
                title="React"
                style={{top:20}}
                visible={this.state.showModal3}
                onCancel={()=>{
                    this.setState({
                        showModal3:false
                    })
                }}>
                    <p>Hello I'm Modal!</p>
                </Modal>
                <Modal 
                title="React"
                wrapClassName="vertical-center-modal"
              
                visible={this.state.showModal4}
                onCancel={()=>{
                    this.setState({
                        showModal4:false
                    })
                }}>
                    <p>Hello I'm Modal!</p>
                </Modal>
            </div>
        );
    }

}